<!-- 武器展示页面模板 -->
<template>
  <!-- 武器展示页面根容器 -->
  <div class="weapon-display"> <!-- 武器展示页面根容器 设置页面基础样式和布局 -->
    <!-- 页面标题区域 -->
    <div class="page-header"> <!-- 页面标题区域 包含页面主标题和描述信息 -->
      <!-- 页面主标题 -->
      <h1>武器展示</h1> <!-- 页面主标题 显示"武器展示"文字 -->
      <!-- 页面描述 -->
      <p>探索崩坏3中的各种武器</p> <!-- 页面描述 显示页面功能说明文字 -->
    </div>

    <!-- 加载状态显示区域 -->
    <div v-if="loading" class="loading-container"> <!-- 加载状态显示区域 条件渲染：当loading为true时显示 -->
      <!-- 加载动画图标 -->
      <div class="loading-spinner"></div> <!-- 加载动画图标 显示旋转的加载动画效果 -->
      <!-- 加载提示文字 -->
      <p>加载中...</p> <!-- 加载提示文字 显示"加载中..."提示信息 -->
    </div>

    <!-- 错误状态显示区域 -->
    <div v-else-if="error" class="error-container"> <!-- 错误状态显示区域 条件渲染：当error存在且loading为false时显示 -->
      <!-- 错误信息显示 -->
      <p>{{ error }}</p> <!-- 错误信息显示 动态绑定error变量内容 -->
      <!-- 重试按钮 -->
      <button @click="loadData" class="retry-btn">重试</button> <!-- 重试按钮 点击事件绑定loadData方法 重新加载数据 -->
    </div>

    <!-- 主要内容区域 -->
    <div v-else> <!-- 主要内容区域 条件渲染：当loading为false且error为空时显示 -->
      <!-- 搜索和筛选功能区域 -->
      <div class="search-section"> <!-- 搜索和筛选功能区域 包含搜索输入框和筛选下拉框 -->
        <!-- 搜索筛选容器 -->
        <div class="search-container"> <!-- 搜索筛选容器 弹性布局容器 水平排列搜索和筛选组件 -->
          <!-- 搜索输入框包装器 -->
          <div class="search-input-wrapper"> <!-- 搜索输入框包装器 相对定位容器 包含输入框和搜索图标 -->
            <!-- 武器名称搜索输入框 -->
            <input 
              v-model="searchQuery" 
              type="text" 
              placeholder="搜索武器名称..." 
              class="search-input"
              @input="handleSearch"
            > <!-- 武器名称搜索输入框 双向数据绑定searchQuery 输入事件触发handleSearch方法 -->
            <!-- 搜索图标 -->
            <i class="search-icon">🔍</i> <!-- 搜索图标 绝对定位在输入框右侧 显示搜索图标 -->
          </div>
          
          <!-- 筛选功能容器 -->
          <div class="filter-container"> <!-- 筛选功能容器 包含英雄筛选下拉框 -->
            <!-- 英雄筛选下拉框 -->
            <select v-model="selectedHero" @change="handleFilter" class="hero-filter"> <!-- 英雄筛选下拉框 双向数据绑定selectedHero 选择变化时触发handleFilter方法 -->
              <!-- 默认选项：所有英雄 -->
              <option value="">所有英雄</option> <!-- 默认选项：所有英雄 值为空字符串 显示所有武器 -->
              <!-- 英雄选项列表 循环渲染 -->
              <option v-for="hero in heroList" :key="hero.id" :value="hero.id"> <!-- 英雄选项列表 循环渲染heroList数组 使用hero.id作为key和value -->
                {{ hero.heroName }} <!-- 英雄名称显示 动态绑定hero.heroName -->
              </option>
            </select>
          </div>
        </div>
      </div>

      <!-- 武器网格展示区域 -->
      <div class="weapons-grid"> <!-- 武器网格展示区域 网格布局容器 展示武器卡片列表 -->
        <!-- 武器卡片 循环渲染 -->
        <div 
          v-for="weapon in filteredWeapons" 
          :key="weapon.weaponId" 
          class="weapon-card"
          @click="selectWeapon(weapon)"
        > <!-- 武器卡片 循环渲染filteredWeapons数组 使用weapon.weaponId作为key 点击事件触发selectWeapon方法 -->
          <!-- 武器图片区域 -->
          <div class="weapon-image"> <!-- 武器图片区域 包含武器图片的容器 -->
            <!-- 武器图片 -->
            <img 
              :src="weapon.weaponSkillUrl || '/default-weapon.png'" 
              :alt="weapon.weaponName"
              @error="handleImageError"
            > <!-- 武器图片 动态绑定图片源 使用weaponSkillUrl或默认图片 alt属性绑定武器名称 图片加载错误时触发handleImageError方法 -->
          </div>
          <!-- 武器信息区域 -->
          <div class="weapon-info"> <!-- 武器信息区域 包含武器基本信息的容器 -->
            <!-- 武器名称 -->
            <h3 class="weapon-name">{{ weapon.weaponName }}</h3> <!-- 武器名称 动态绑定weapon.weaponName -->
          </div>
        </div>
      </div>

      <!-- 空状态提示区域 -->
      <div v-if="filteredWeapons.length === 0" class="empty-state"> <!-- 空状态提示区域 条件渲染：当filteredWeapons数组长度为0时显示 -->
        <!-- 空状态图标 -->
        <div class="empty-icon">⚔️</div> <!-- 空状态图标 显示武器图标表示空状态 -->
        <!-- 空状态标题 -->
        <h3>暂无武器数据</h3> <!-- 空状态标题 显示"暂无武器数据"提示 -->
        <!-- 空状态描述 -->
        <p>{{ searchQuery || selectedHero ? '没有找到符合条件的武器' : '暂时没有武器数据' }}</p> <!-- 空状态描述 根据搜索条件动态显示不同的提示信息 -->
      </div>
    </div>

    <!-- 武器详情模态框 -->
    <div v-if="showDetailModal" class="modal-overlay" @click="closeDetailModal"> <!-- 武器详情模态框 条件渲染：当showDetailModal为true时显示 点击遮罩层关闭模态框 -->
      <!-- 模态框内容容器 -->
      <div class="modal-content weapon-detail-modal" @click.stop> <!-- 模态框内容容器 阻止点击事件冒泡 防止点击内容区域关闭模态框 -->
        <!-- 模态框头部 -->
        <div class="modal-header"> <!-- 模态框头部 包含标题和关闭按钮 -->
          <!-- 武器名称标题 -->
          <h2>{{ selectedWeapon?.weaponName }}</h2> <!-- 武器名称标题 动态绑定selectedWeapon的weaponName 使用可选链操作符防止空值错误 -->
          <!-- 关闭按钮 -->
          <button @click="closeDetailModal" class="close-btn">×</button> <!-- 关闭按钮 点击事件触发closeDetailModal方法 显示×符号 -->
        </div>
        <!-- 模态框主体内容 -->
        <div class="modal-body"> <!-- 模态框主体内容 包含武器详细信息 -->
          <!-- 武器详情内容容器 -->
          <div class="weapon-detail-content"> <!-- 武器详情内容容器 网格布局 分为图片区域和详情区域 -->
            <!-- 武器大图显示区域 -->
            <div class="weapon-image-large"> <!-- 武器大图显示区域 显示武器的大尺寸图片 -->
              <!-- 武器大图 -->
              <img 
                :src="selectedWeapon?.weaponSkillUrl || '/default-weapon.png'" 
                :alt="selectedWeapon?.weaponName"
                @error="handleImageError"
              > <!-- 武器大图 动态绑定selectedWeapon的weaponSkillUrl 使用可选链操作符 图片加载错误时触发handleImageError方法 -->
            </div>
            <!-- 武器详细信息区域 -->
            <div class="weapon-details"> <!-- 武器详细信息区域 包含武器的各种详细信息 -->
              <!-- 基础属性区域 -->
              <div class="detail-section"> <!-- 基础属性区域 显示武器的基础属性信息 -->
                <!-- 基础属性标题 -->
                <h3>基础属性</h3> <!-- 基础属性标题 显示"基础属性"文字 -->
                <!-- 属性网格容器 -->
                <div class="stats-grid"> <!-- 属性网格容器 网格布局显示各项属性 -->
                  <!-- 攻击力属性项 -->
                  <div class="stat-item"> <!-- 攻击力属性项 显示攻击力数值 -->
                    <!-- 攻击力标签 -->
                    <span class="stat-label">攻击力</span> <!-- 攻击力标签 显示"攻击力"文字 -->
                    <!-- 攻击力数值 -->
                    <span class="stat-value">{{ selectedWeapon?.attack }}</span> <!-- 攻击力数值 动态绑定selectedWeapon的attack属性 -->
                  </div>
                  <!-- 暴击率属性项 -->
                  <div class="stat-item"> <!-- 暴击率属性项 显示暴击率数值 -->
                    <!-- 暴击率标签 -->
                    <span class="stat-label">暴击率</span> <!-- 暴击率标签 显示"暴击率"文字 -->
                    <!-- 暴击率数值 -->
                    <span class="stat-value">{{ selectedWeapon?.critRate }}%</span> <!-- 暴击率数值 动态绑定selectedWeapon的critRate属性 并添加%符号 -->
                  </div>
                </div>
              </div>
              
              <!-- 适宜英雄区域 -->
              <div class="detail-section" v-if="getHeroInfo(selectedWeapon?.heroId)"> <!-- 适宜英雄区域 条件渲染：当getHeroInfo方法返回英雄信息时显示 -->
                <!-- 适宜英雄标题 -->
                <h3>适宜英雄</h3> <!-- 适宜英雄标题 显示"适宜英雄"文字 -->
                <!-- 英雄信息容器 -->
                <div class="hero-info" @click="goToHeroDetail(selectedWeapon?.heroId)"> <!-- 英雄信息容器 点击事件触发goToHeroDetail方法 跳转到英雄详情页 -->
                  <!-- 英雄头像区域 -->
                  <div class="hero-avatar"> <!-- 英雄头像区域 显示英雄头像图片 -->
                    <!-- 英雄头像图片 -->
                    <img 
                      :src="getHeroInfo(selectedWeapon?.heroId)?.smallIconUrl || '/default-hero.png'" 
                      :alt="getHeroInfo(selectedWeapon?.heroId)?.heroName"
                      @error="handleHeroImageError"
                    > <!-- 英雄头像图片 动态绑定英雄的smallIconUrl 图片加载错误时触发handleHeroImageError方法 -->
                  </div>
                  <!-- 英雄详细信息 -->
                  <div class="hero-details"> <!-- 英雄详细信息 包含英雄名称等信息 -->
                    <!-- 英雄名称 -->
                    <span class="hero-name">{{ getHeroInfo(selectedWeapon?.heroId)?.heroName }}</span> <!-- 英雄名称 动态绑定英雄的heroName -->
                  </div>
                </div>
              </div>
              
              <!-- 武器背景区域 -->
              <div class="detail-section" v-if="selectedWeapon?.weaponBackground"> <!-- 武器背景区域 条件渲染：当selectedWeapon存在weaponBackground时显示 -->
                <!-- 武器背景标题 -->
                <h3>武器背景</h3> <!-- 武器背景标题 显示"武器背景"文字 -->
                <!-- 武器背景描述 -->
                <p class="weapon-description">{{ selectedWeapon.weaponBackground }}</p> <!-- 武器背景描述 动态绑定selectedWeapon的weaponBackground -->
              </div>
              
              <!-- 武器技能区域 -->
              <div class="detail-section" v-if="selectedWeapon?.weaponSkill"> <!-- 武器技能区域 条件渲染：当selectedWeapon存在weaponSkill时显示 -->
                <!-- 武器技能标题 -->
                <h3>武器技能</h3> <!-- 武器技能标题 显示"武器技能"文字 -->
                <!-- 武器技能描述 -->
                <p class="weapon-skill">{{ selectedWeapon.weaponSkill }}</p> <!-- 武器技能描述 动态绑定selectedWeapon的weaponSkill -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<!-- 武器展示页面脚本部分 -->
<script setup>
/* 依赖导入 */
import { ref, computed, onMounted } from 'vue' /* Vue组合式API导入 ref：创建响应式引用 computed：创建计算属性 onMounted：组件挂载生命周期钩子 */
import { ElMessage } from 'element-plus' /* Element Plus消息提示组件导入 用于显示操作反馈信息 */
import { weaponApi } from '../api/weapon.js' /* 武器API接口导入 提供武器相关的数据请求方法 */
import { heroApi } from '../api/hero.js' /* 英雄API接口导入 提供英雄相关的数据请求方法 */

/* 响应式数据定义 */
const weapons = ref([]) /* 武器列表数据 响应式引用 存储从后端获取的武器数组 */
const heroList = ref([]) /* 英雄列表数据 响应式引用 存储从后端获取的英雄数组 */
const searchQuery = ref('') /* 搜索查询字符串 响应式引用 存储用户输入的搜索关键词 */
const selectedHero = ref('') /* 选中的英雄ID 响应式引用 存储用户选择的英雄筛选条件 */
const selectedWeapon = ref(null) /* 选中的武器对象 响应式引用 存储用户点击查看详情的武器信息 */
const showDetailModal = ref(false) /* 详情模态框显示状态 响应式引用 控制武器详情弹窗的显示隐藏 */
const loading = ref(true) /* 加载状态标识 响应式引用 控制加载动画的显示 */
const error = ref(null) /* 错误信息 响应式引用 存储请求失败时的错误提示信息 */

/* 计算属性定义 */
const filteredWeapons = computed(() => { /* 过滤后的武器列表 计算属性 根据搜索条件动态过滤武器数据 */
  let filtered = weapons.value /* 获取原始武器数据 从响应式引用中取值 */
  
  /* 按名称搜索过滤 */
  if (searchQuery.value) { /* 搜索条件判断 如果存在搜索关键词则进行过滤 */
    const query = searchQuery.value.toLowerCase() /* 搜索关键词转小写 统一大小写进行匹配 */
    filtered = filtered.filter(weapon => /* 数组过滤方法 筛选包含关键词的武器 */
      weapon.weaponName.toLowerCase().includes(query) /* 武器名称匹配 将武器名称转小写后检查是否包含搜索关键词 */
    )
  }
  
  return filtered /* 返回过滤结果 返回符合条件的武器数组 */
})

/* 数据加载方法 */
const loadData = async () => { /* 数据加载主方法 异步函数 统一加载武器和英雄数据 */
  try { /* 异常处理开始 捕获可能的请求错误 */
    loading.value = true /* 设置加载状态 显示加载动画 */
    error.value = null /* 清空错误信息 重置错误状态 */
    
    /* 并行加载武器和英雄数据 */
    const [weaponResponse, heroResponse] = await Promise.all([ /* 并行请求 同时发起武器和英雄数据请求 提高加载效率 */
      weaponApi.getAllWeapons(), /* 获取所有武器数据 调用武器API接口 */
      heroApi.getAllHeroes() /* 获取所有英雄数据 调用英雄API接口 */
    ])
    
    /* 武器数据处理 */
    if (weaponResponse.code === 0) { /* 武器请求成功判断 检查响应状态码 */
      weapons.value = weaponResponse.data || [] /* 设置武器数据 将响应数据赋值给响应式变量 如果数据为空则使用空数组 */
    } else { /* 武器请求失败处理 */
      throw new Error(weaponResponse.message || '获取武器数据失败') /* 抛出错误 使用响应消息或默认错误信息 */
    }
    
    /* 英雄数据处理 */
    if (heroResponse.code === 0) { /* 英雄请求成功判断 检查响应状态码 */
      heroList.value = heroResponse.data || [] /* 设置英雄数据 将响应数据赋值给响应式变量 如果数据为空则使用空数组 */
    } else { /* 英雄请求失败处理 */
      console.warn('获取英雄数据失败:', heroResponse.message) /* 控制台警告 记录英雄数据获取失败信息 */
      heroList.value = [] /* 设置空数组 确保英雄列表为空数组而不是undefined */
    }
    
  } catch (err) { /* 异常捕获 处理请求过程中的错误 */
    console.error('加载数据失败:', err) /* 控制台错误日志 记录详细错误信息 */
    error.value = '网络错误，请稍后重试' /* 设置用户友好的错误提示 */
    weapons.value = [] /* 重置武器数据 确保数据状态一致 */
    heroList.value = [] /* 重置英雄数据 确保数据状态一致 */
  } finally { /* 最终处理 无论成功失败都会执行 */
    loading.value = false /* 关闭加载状态 隐藏加载动画 */
  }
}

/* 加载所有武器方法 */
const loadAllWeapons = async () => { /* 加载所有武器方法 异步函数 专门用于获取全部武器数据 */
  try { /* 异常处理开始 捕获可能的请求错误 */
    loading.value = true /* 设置加载状态 显示加载动画 */
    error.value = null /* 清空错误信息 重置错误状态 */
    
    /* 获取武器数据 */
    const response = await weaponApi.getAllWeapons() /* 调用武器API 获取所有武器数据 */
    
    /* 响应数据处理 */
    if (response.code === 0) { /* 请求成功判断 检查响应状态码 */
      weapons.value = response.data || [] /* 设置武器数据 将响应数据赋值给响应式变量 */
    } else { /* 请求失败处理 */
      throw new Error(response.message || '获取武器数据失败') /* 抛出错误 使用响应消息或默认错误信息 */
    }
    
  } catch (err) { /* 异常捕获 处理请求过程中的错误 */
    console.error('加载武器失败:', err) /* 控制台错误日志 记录详细错误信息 */
    error.value = '网络错误，请稍后重试' /* 设置用户友好的错误提示 */
    weapons.value = [] /* 重置武器数据 确保数据状态一致 */
  } finally { /* 最终处理 无论成功失败都会执行 */
    loading.value = false /* 关闭加载状态 隐藏加载动画 */
  }
}

/* 搜索处理方法 */
const handleSearch = () => { /* 搜索处理方法 处理用户搜索输入 */
  /* 搜索逻辑已在计算属性中处理 实际搜索逻辑在filteredWeapons计算属性中实现 */
}

/* 英雄筛选处理方法 */
const handleFilter = async () => { /* 英雄筛选处理方法 异步函数 根据选择的英雄筛选武器 */
  if (!selectedHero.value) { /* 未选择英雄判断 如果没有选择特定英雄 */
    /* 如果没有选择英雄，加载所有武器 */
    await loadAllWeapons() /* 调用加载所有武器方法 显示全部武器数据 */
    return /* 提前返回 结束方法执行 */
  }
  
  try { /* 异常处理开始 捕获可能的请求错误 */
    loading.value = true /* 设置加载状态 显示加载动画 */
    error.value = null /* 清空错误信息 重置错误状态 */
    
    /* 调用后端接口获取指定英雄的武器列表 */
    const heroId = Number(selectedHero.value) /* 英雄ID类型转换 确保传递数字类型的ID */
    const response = await weaponApi.getWeaponsByHeroId(heroId) /* 调用API接口 根据英雄ID获取对应武器列表 */
    
    /* 响应数据处理 */
    if (response.code === 0) { /* 请求成功判断 检查响应状态码 */
      weapons.value = response.data || [] /* 设置武器数据 将筛选后的武器数据赋值给响应式变量 */
    } else { /* 请求失败处理 */
      throw new Error(response.message || '获取武器数据失败') /* 抛出错误 使用响应消息或默认错误信息 */
    }
    
  } catch (err) { /* 异常捕获 处理请求过程中的错误 */
    console.error('筛选武器失败:', err) /* 控制台错误日志 记录详细错误信息 */
    error.value = '筛选失败，请稍后重试' /* 设置用户友好的错误提示 */
    ElMessage.error('筛选武器失败') /* 显示错误消息 使用Element Plus消息组件提示用户 */
  } finally { /* 最终处理 无论成功失败都会执行 */
    loading.value = false /* 关闭加载状态 隐藏加载动画 */
  }
}

/* 武器选择方法 */
const selectWeapon = (weapon) => { /* 武器选择方法 处理用户点击武器卡片事件 */
  selectedWeapon.value = weapon /* 设置选中武器 将点击的武器对象赋值给响应式变量 */
  showDetailModal.value = true /* 显示详情模态框 打开武器详情弹窗 */
}

/* 关闭详情模态框方法 */
const closeDetailModal = () => { /* 关闭详情模态框方法 处理模态框关闭事件 */
  showDetailModal.value = false /* 隐藏详情模态框 关闭武器详情弹窗 */
  selectedWeapon.value = null /* 清空选中武器 重置选中状态 */
}

/* 武器图片错误处理方法 */
const handleImageError = (event) => { /* 武器图片错误处理方法 处理图片加载失败事件 */
  event.target.src = '/default-weapon.png' /* 设置默认图片 当图片加载失败时显示默认武器图片 */
}

/* 英雄图片错误处理方法 */
const handleHeroImageError = (event) => { /* 英雄图片错误处理方法 处理英雄头像加载失败事件 */
  event.target.src = '/default-hero.png' /* 设置默认头像 当英雄头像加载失败时显示默认图片 */
}

/* 获取英雄信息方法 */
const getHeroInfo = (heroId) => { /* 获取英雄信息方法 根据英雄ID查找英雄详细信息 */
  if (!heroId) return null /* 参数验证 如果英雄ID为空则返回null */
  return heroList.value.find(hero => hero.id === heroId) /* 查找英雄 在英雄列表中根据ID查找对应英雄对象 */
}

/* 跳转英雄详情方法 */
const goToHeroDetail = (heroId) => { /* 跳转英雄详情方法 处理点击英雄信息跳转事件 */
  if (!heroId) return /* 参数验证 如果英雄ID为空则不执行跳转 */
  /* 跳转到角色页面 */
  window.location.href = '/character' /* 页面跳转 使用window.location跳转到角色页面 */
}

/* 组件生命周期钩子 */
onMounted(async () => { /* 组件挂载钩子 异步函数 组件挂载完成后执行 */
  await loadData() /* 初始化数据加载 组件挂载时自动加载武器和英雄数据 */
})
</script>

<!-- 武器展示页面样式部分 -->
<style scoped>
/* 主容器样式 */
.weapon-display { /* 武器展示页面主容器 页面整体布局和背景设置 */
  min-height: calc(100vh - 70px); /* 武器展示页面主容器 最小高度：视口高度减去70px 确保页面占满剩余空间 */
  padding: 2rem; /* 武器展示页面主容器 内边距：2rem 为页面内容提供合适的边距 */
  background: rgba(0, 0, 0, 0.7); /* 武器展示页面主容器 背景：黑色70%透明度 半透明深色背景 */
}

/* 页面头部样式 */
.page-header { /* 页面头部 页面标题和描述的容器 */
  text-align: center; /* 页面头部 文本对齐：居中 头部内容居中显示 */
  margin-bottom: 2rem; /* 页面头部 下边距：2rem 与下方内容保持间距 */
  color: white; /* 页面头部 字体颜色：白色 与深色背景形成对比 */
}

.page-header h1 { /* 页面主标题 页面的主要标题样式 */
  font-size: 2.5rem; /* 页面主标题 字体大小：2.5rem 大号标题字体 */
  margin-bottom: 0.5rem; /* 页面主标题 下边距：0.5rem 与副标题保持间距 */
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4); /* 页面主标题 背景：线性渐变 45度 从 #ff6b6b 到 #4ecdc4 渐变色背景 */
  -webkit-background-clip: text; /* 页面主标题 WebKit背景裁剪：文字 将背景裁剪为文字形状 */
  -webkit-text-fill-color: transparent; /* 页面主标题 WebKit文字填充颜色：透明 使文字透明显示背景 */
  background-clip: text; /* 页面主标题 背景裁剪：文字 标准属性 将背景裁剪为文字形状 */
}

.page-header p { /* 页面副标题 页面的描述文字样式 */
  font-size: 1.1rem; /* 页面副标题 字体大小：1.1rem 适中的描述文字大小 */
  opacity: 0.8; /* 页面副标题 透明度：0.8 半透明效果 */
}

/* 加载状态样式 */
.loading-container { /* 加载状态容器 数据加载时的提示区域 */
  display: flex; /* 加载状态容器 弹性布局 使用flex布局 */
  flex-direction: column; /* 加载状态容器 弹性方向：列 垂直排列子元素 */
  align-items: center; /* 加载状态容器 交叉轴对齐：居中 水平居中对齐 */
  justify-content: center; /* 加载状态容器 主轴对齐：居中 垂直居中对齐 */
  min-height: 300px; /* 加载状态容器 最小高度：300px 为加载提示提供足够空间 */
  color: white; /* 加载状态容器 字体颜色：白色 与背景形成对比 */
}

.loading-spinner { /* 加载动画 旋转的加载指示器 */
  width: 50px; /* 加载动画 宽度：50px 固定加载动画宽度 */
  height: 50px; /* 加载动画 高度：50px 固定加载动画高度 */
  border: 3px solid rgba(255, 255, 255, 0.3); /* 加载动画 边框：3px 白色30%透明度 半透明边框 */
  border-top: 3px solid #4ecdc4; /* 加载动画 顶部边框：3px #4ecdc4 青色顶部边框 */
  border-radius: 50%; /* 加载动画 圆角：50% 圆形加载动画 */
  animation: spin 1s linear infinite; /* 加载动画 动画：旋转 1秒 线性 无限循环 */
  margin-bottom: 1rem; /* 加载动画 下边距：1rem 与下方文字保持间距 */
}

@keyframes spin { /* 旋转动画关键帧 定义旋转动画效果 */
  0% { transform: rotate(0deg); } /* 旋转动画关键帧 0%：旋转0度 动画开始状态 */
  100% { transform: rotate(360deg); } /* 旋转动画关键帧 100%：旋转360度 动画结束状态 */
}

/* 错误状态样式 */
.error-container { /* 错误状态容器 错误信息显示区域 */
  text-align: center; /* 错误状态容器 文本对齐：居中 错误信息居中显示 */
  padding: 2rem; /* 错误状态容器 内边距：2rem 为错误信息提供充足空间 */
  color: #ff6b6b; /* 错误状态容器 字体颜色：#ff6b6b 红色表示错误状态 */
}

.retry-btn { /* 重试按钮 错误状态下的重试操作按钮 */
  background: #4ecdc4; /* 重试按钮 背景颜色：#4ecdc4 青色背景表示可操作 */
  color: white; /* 重试按钮 字体颜色：白色 与背景形成对比 */
  border: none; /* 重试按钮 边框：无 移除默认边框 */
  padding: 0.5rem 1rem; /* 重试按钮 内边距：0.5rem 1rem 为按钮提供合适的点击区域 */
  border-radius: 5px; /* 重试按钮 圆角：5px 轻微圆角增加美观 */
  cursor: pointer; /* 重试按钮 鼠标悬停样式：指针 表示可点击 */
  margin-top: 1rem; /* 重试按钮 上边距：1rem 与上方内容保持间距 */
}

.retry-btn:hover { /* 重试按钮悬停状态 鼠标悬停时的样式变化 */
  background: #45b7aa; /* 重试按钮悬停状态 背景颜色：#45b7aa 悬停时颜色加深 */
}

/* 搜索区域样式 */
.search-section { /* 搜索区域 搜索和筛选功能的容器 */
  background: rgba(255, 255, 255, 0.1); /* 搜索区域 背景：白色10%透明度 半透明背景突出搜索区域 */
  padding: 1.5rem; /* 搜索区域 内边距：1.5rem 为搜索功能提供空间 */
  border-radius: 10px; /* 搜索区域 圆角：10px 圆角设计增加美观度 */
  margin-bottom: 2rem; /* 搜索区域 下边距：2rem 与武器网格保持间距 */
}

.search-container { /* 搜索容器 搜索输入框和筛选器的容器 */
  display: flex; /* 搜索容器 弹性布局 使用flex布局 */
  gap: 1rem; /* 搜索容器 子元素间距：1rem 搜索框和筛选器之间的间距 */
  align-items: center; /* 搜索容器 交叉轴对齐：居中 垂直居中对齐 */
  flex-wrap: wrap; /* 搜索容器 换行：允许 响应式布局时允许换行 */
}

.search-input-wrapper { /* 搜索输入框包装器 搜索输入框的外层容器 */
  position: relative; /* 搜索输入框包装器 定位：相对 为搜索图标提供定位参考 */
  flex: 1; /* 搜索输入框包装器 弹性增长：1 占据剩余空间 */
  min-width: 250px; /* 搜索输入框包装器 最小宽度：250px 确保输入框有足够宽度 */
}

.search-input { /* 搜索输入框 用户输入搜索关键词的输入框 */
  width: 100%; /* 搜索输入框 宽度：100% 占满包装器宽度 */
  padding: 0.75rem 2.5rem 0.75rem 1rem; /* 搜索输入框 内边距：0.75rem 2.5rem 0.75rem 1rem 为输入和图标提供空间 */
  border: 2px solid rgba(255, 255, 255, 0.2); /* 搜索输入框 边框：2px 白色20%透明度 半透明边框 */
  border-radius: 25px; /* 搜索输入框 圆角：25px 圆角设计增加美观度 */
  background: rgba(255, 255, 255, 0.1); /* 搜索输入框 背景：白色10%透明度 半透明背景 */
  color: white; /* 搜索输入框 字体颜色：白色 与背景形成对比 */
  font-size: 1rem; /* 搜索输入框 字体大小：1rem 标准输入文字大小 */
}

.search-input::placeholder { /* 搜索输入框占位符 输入框提示文字样式 */
  color: rgba(255, 255, 255, 0.6); /* 搜索输入框占位符 字体颜色：白色60%透明度 占位符文字颜色 */
}

.search-input:focus { /* 搜索输入框焦点状态 获得焦点时的样式变化 */
  outline: none; /* 搜索输入框焦点状态 轮廓：无 移除默认焦点轮廓 */
  border-color: #4ecdc4; /* 搜索输入框焦点状态 边框颜色：#4ecdc4 焦点时边框变为青色 */
  background: rgba(255, 255, 255, 0.15); /* 搜索输入框焦点状态 背景：白色15%透明度 焦点时背景更明显 */
}

.search-icon { /* 搜索图标 搜索输入框内的图标 */
  position: absolute; /* 搜索图标 定位：绝对 绝对定位在输入框内 */
  right: 1rem; /* 搜索图标 右侧：1rem 距离右侧1rem */
  top: 50%; /* 搜索图标 顶部：50% 垂直居中定位 */
  transform: translateY(-50%); /* 搜索图标 变换：向上移动50% 精确垂直居中 */
  color: rgba(255, 255, 255, 0.6); /* 搜索图标 字体颜色：白色60%透明度 半透明图标 */
}

.filter-container { /* 筛选容器 筛选器的容器 */
  display: flex; /* 筛选容器 弹性布局 使用flex布局 */
  gap: 1rem; /* 筛选容器 子元素间距：1rem 筛选器之间的间距 */
}

.hero-filter { /* 英雄筛选器 英雄筛选的下拉选择器 */
  padding: 0.75rem 1rem; /* 英雄筛选器 内边距：0.75rem 1rem 为选择器提供空间 */
  border: 2px solid rgba(255, 255, 255, 0.2); /* 英雄筛选器 边框：2px 白色20%透明度 半透明边框 */
  border-radius: 8px; /* 英雄筛选器 圆角：8px 轻微圆角设计 */
  background: rgba(255, 255, 255, 0.1); /* 英雄筛选器 背景：白色10%透明度 半透明背景 */
  color: white; /* 英雄筛选器 字体颜色：白色 与背景形成对比 */
  font-size: 1rem; /* 英雄筛选器 字体大小：1rem 标准选择器文字大小 */
  min-width: 150px; /* 英雄筛选器 最小宽度：150px 确保选择器有足够宽度 */
}

.hero-filter:focus { /* 英雄筛选器焦点状态 获得焦点时的样式变化 */
  outline: none; /* 英雄筛选器焦点状态 轮廓：无 移除默认焦点轮廓 */
  border-color: #4ecdc4; /* 英雄筛选器焦点状态 边框颜色：#4ecdc4 焦点时边框变为青色 */
}

.hero-filter option { /* 英雄筛选器选项 下拉选项的样式设置 */
  background: #2c3e50; /* 英雄筛选器选项 背景颜色：#2c3e50 深色背景 */
  color: white; /* 英雄筛选器选项 字体颜色：白色 与背景形成对比 */
}

/* 武器网格样式 */
.weapons-grid { /* 武器网格容器 武器卡片的网格布局容器 */
  display: grid; /* 武器网格容器 网格布局 使用CSS Grid布局 */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* 武器网格容器 网格列：自动填充 最小250px 最大1fr 响应式网格列 */
  gap: 1.2rem; /* 武器网格容器 网格间距：1.2rem 武器卡片之间的间距 */
  margin-bottom: 2rem; /* 武器网格容器 下边距：2rem 与下方内容保持间距 */
}

.weapon-card { /* 武器卡片 单个武器信息的卡片容器 */
  background: transparent; /* 武器卡片 背景：透明 透明背景 */
  border-radius: 15px; /* 武器卡片 圆角：15px 圆角设计增加美观度 */
  padding: 1rem; /* 武器卡片 内边距：1rem 为卡片内容提供空间 */
  border: 1px solid rgba(255, 255, 255, 0.2); /* 武器卡片 边框：1px 白色20%透明度 轻微边框 */
  transition: all 0.3s ease; /* 武器卡片 所有属性变化过渡时间：0.3秒 过渡效果：缓动 */
  cursor: pointer; /* 武器卡片 鼠标悬停样式：指针 表示可点击 */
  display: flex; /* 武器卡片 弹性布局 使用flex布局 */
  flex-direction: column; /* 武器卡片 弹性方向：列 垂直排列子元素 */
  height: auto; /* 武器卡片 高度：自动 根据内容自动调整高度 */
}

.weapon-card:hover { /* 武器卡片悬停状态 鼠标悬停时的样式变化 */
  transform: translateY(-5px); /* 武器卡片悬停状态 变换：向上移动5px 悬停时上浮效果 */
  background: rgba(255, 255, 255, 0.15); /* 武器卡片悬停状态 背景：白色15%透明度 悬停时背景更明显 */
  border-color: #4ecdc4; /* 武器卡片悬停状态 边框颜色：#4ecdc4 悬停时边框变为青色 */
  box-shadow: 0 10px 30px rgba(78, 205, 196, 0.3); /* 武器卡片悬停状态 盒子阴影：0 10px 30px 青色30%透明度 悬停时发光阴影效果 */
}

.weapon-image { /* 武器图片容器 武器图片的容器 */
  width: 100%; /* 武器图片容器 宽度：100% 占满卡片宽度 */
  margin-bottom: 1rem; /* 武器图片容器 下边距：1rem 与下方内容保持间距 */
  border-radius: 10px; /* 武器图片容器 圆角：10px 图片容器圆角设计 */
  overflow: hidden; /* 武器图片容器 溢出：隐藏 隐藏超出容器的部分 */
  background: rgba(255, 255, 255, 0.05); /* 武器图片容器 背景：白色5%透明度 轻微背景色 */
  display: flex; /* 武器图片容器 弹性布局 使用flex布局 */
  align-items: center; /* 武器图片容器 交叉轴对齐：居中 垂直居中对齐 */
  justify-content: center; /* 武器图片容器 主轴对齐：居中 水平居中对齐 */
  min-height: 120px; /* 武器图片容器 最小高度：120px 确保容器有足够高度 */
}

.weapon-image img { /* 武器图片 武器的展示图片 */
  max-width: 100%; /* 武器图片 最大宽度：100% 不超过容器宽度 */
  max-height: 200px; /* 武器图片 最大高度：200px 限制图片最大高度 */
  width: auto; /* 武器图片 宽度：自动 根据比例自动调整 */
  height: auto; /* 武器图片 高度：自动 根据比例自动调整 */
  object-fit: contain; /* 武器图片 对象适应：包含 保持比例完整显示图片 */
}

.weapon-info { /* 武器信息 武器的文字信息容器 */
  color: white; /* 武器信息 字体颜色：白色 与背景形成对比 */
}

.weapon-name { /* 武器名称 武器的名称文字 */
  font-size: 1.2rem; /* 武器名称 字体大小：1.2rem 突出武器名称 */
  margin-bottom: 0.5rem; /* 武器名称 下边距：0.5rem 与下方内容保持间距 */
  color: #4ecdc4; /* 武器名称 字体颜色：#4ecdc4 青色突出名称 */
}

.weapon-stats { /* 武器属性 武器的属性信息容器 */
  display: flex; /* 武器属性 弹性布局 使用flex布局 */
  flex-direction: column; /* 武器属性 弹性方向：列 垂直排列属性项 */
  gap: 0.3rem; /* 武器属性 子元素间距：0.3rem 属性项之间的间距 */
}

.stat-item { /* 属性项 单个属性的容器 */
  display: flex; /* 属性项 弹性布局 使用flex布局 */
  justify-content: space-between; /* 属性项 主轴对齐：两端对齐 标签和值分布两端 */
  align-items: center; /* 属性项 交叉轴对齐：居中 垂直居中对齐 */
}

.stat-label { /* 属性标签 属性名称的标签 */
  color: rgba(255, 255, 255, 0.7); /* 属性标签 字体颜色：白色70%透明度 半透明标签文字 */
  font-size: 0.9rem; /* 属性标签 字体大小：0.9rem 小号标签文字 */
}

.stat-value { /* 属性值 属性值的文字 */
  color: white; /* 属性值 字体颜色：白色 突出属性值 */
  font-weight: bold; /* 属性值 字体粗细：粗体 增强属性值重要性 */
}

/* 空状态样式 */
.empty-state { /* 空状态容器 无数据时的提示区域 */
  text-align: center; /* 空状态容器 文本对齐：居中 空状态信息居中显示 */
  padding: 3rem; /* 空状态容器 内边距：3rem 为空状态提供充足空间 */
  color: rgba(255, 255, 255, 0.6); /* 空状态容器 字体颜色：白色60%透明度 半透明空状态文字 */
}

.empty-icon { /* 空状态图标 空状态的图标样式 */
  font-size: 4rem; /* 空状态图标 字体大小：4rem 大号图标 */
  margin-bottom: 1rem; /* 空状态图标 下边距：1rem 与下方文字保持间距 */
}

.empty-state h3 { /* 空状态标题 空状态的标题文字 */
  margin-bottom: 0.5rem; /* 空状态标题 下边距：0.5rem 与描述文字保持间距 */
  color: white; /* 空状态标题 字体颜色：白色 突出标题 */
}

/* 模态框样式 */
.modal-overlay { /* 模态框遮罩层 模态框的背景遮罩 */
  position: fixed; /* 模态框遮罩层 定位：固定 固定定位覆盖整个视口 */
  top: 0; /* 模态框遮罩层 顶部：0 从顶部开始 */
  left: 0; /* 模态框遮罩层 左侧：0 从左侧开始 */
  right: 0; /* 模态框遮罩层 右侧：0 到右侧结束 */
  bottom: 0; /* 模态框遮罩层 底部：0 到底部结束 */
  background: rgba(0, 0, 0, 0.8); /* 模态框遮罩层 背景：黑色80%透明度 半透明黑色遮罩 */
  display: flex; /* 模态框遮罩层 弹性布局 使用flex布局 */
  align-items: center; /* 模态框遮罩层 交叉轴对齐：居中 垂直居中对齐 */
  justify-content: center; /* 模态框遮罩层 主轴对齐：居中 水平居中对齐 */
  z-index: 1000; /* 模态框遮罩层 层级：1000 确保在最上层显示 */
  backdrop-filter: blur(5px); /* 模态框遮罩层 背景滤镜：模糊5px 背景模糊效果 */
}

.modal-content { /* 模态框内容 模态框的主要内容容器 */
  background: rgba(255, 255, 255, 0.1); /* 模态框内容 背景：白色10%透明度 半透明模态框背景 */
  border-radius: 15px; /* 模态框内容 圆角：15px 圆角设计增加美观度 */
  backdrop-filter: blur(20px); /* 模态框内容 背景滤镜：模糊20px 毛玻璃效果 */
  border: 1px solid rgba(255, 255, 255, 0.2); /* 模态框内容 边框：1px 白色20%透明度 轻微边框 */
  max-width: 800px; /* 模态框内容 最大宽度：800px 限制模态框最大宽度 */
  width: 90%; /* 模态框内容 宽度：90% 响应式宽度 */
  max-height: 90vh; /* 模态框内容 最大高度：90vh 限制模态框最大高度 */
  overflow-y: auto; /* 模态框内容 垂直溢出：自动滚动 内容过多时显示滚动条 */
}

.modal-header { /* 模态框头部 模态框的头部区域 */
  display: flex; /* 模态框头部 弹性布局 使用flex布局 */
  justify-content: space-between; /* 模态框头部 主轴对齐：两端对齐 标题和关闭按钮分布两端 */
  align-items: center; /* 模态框头部 交叉轴对齐：居中 垂直居中对齐 */
  padding: 1.5rem; /* 模态框头部 内边距：1.5rem 为头部内容提供空间 */
  border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* 模态框头部 下边框：1px 白色10%透明度 分隔线 */
}

.modal-header h2 { /* 模态框标题 模态框的标题文字 */
  color: #4ecdc4; /* 模态框标题 字体颜色：#4ecdc4 青色突出标题 */
  margin: 0; /* 模态框标题 边距：0 重置标题边距 */
}

.close-btn { /* 关闭按钮 关闭模态框的按钮 */
  background: none; /* 关闭按钮 背景：无 透明背景 */
  border: none; /* 关闭按钮 边框：无 移除默认边框 */
  color: white; /* 关闭按钮 字体颜色：白色 与背景形成对比 */
  font-size: 1.5rem; /* 关闭按钮 字体大小：1.5rem 大号关闭图标 */
  cursor: pointer; /* 关闭按钮 鼠标悬停样式：指针 表示可点击 */
  padding: 0.5rem; /* 关闭按钮 内边距：0.5rem 为按钮提供点击区域 */
  border-radius: 50%; /* 关闭按钮 圆角：50% 圆形按钮 */
  width: 40px; /* 关闭按钮 宽度：40px 固定按钮宽度 */
  height: 40px; /* 关闭按钮 高度：40px 固定按钮高度 */
  display: flex; /* 关闭按钮 弹性布局 使用flex布局 */
  align-items: center; /* 关闭按钮 交叉轴对齐：居中 垂直居中对齐 */
  justify-content: center; /* 关闭按钮 主轴对齐：居中 水平居中对齐 */
}

.close-btn:hover { /* 关闭按钮悬停状态 鼠标悬停时的样式变化 */
  background: rgba(255, 255, 255, 0.1); /* 关闭按钮悬停状态 背景：白色10%透明度 悬停时显示背景 */
}

.modal-body { /* 模态框主体 模态框的主要内容区域 */
  padding: 1.5rem; /* 模态框主体 内边距：1.5rem 为主体内容提供空间 */
}

.weapon-detail-content { /* 武器详情内容 武器详情的内容布局 */
  display: grid; /* 武器详情内容 网格布局 使用CSS Grid布局 */
  grid-template-columns: 1fr 2fr; /* 武器详情内容 网格列：1fr 2fr 图片占1份 详情占2份 */
  gap: 2rem; /* 武器详情内容 网格间距：2rem 图片和详情之间的间距 */
  color: white; /* 武器详情内容 字体颜色：白色 与背景形成对比 */
}

.weapon-image-large { /* 武器大图 模态框中的武器大图容器 */
  width: 100%; /* 武器大图 宽度：100% 占满容器宽度 */
  height: 250px; /* 武器大图 高度：250px 固定大图高度 */
  border-radius: 10px; /* 武器大图 圆角：10px 图片容器圆角设计 */
  overflow: hidden; /* 武器大图 溢出：隐藏 隐藏超出容器的部分 */
  background: rgba(255, 255, 255, 0.05); /* 武器大图 背景：白色5%透明度 轻微背景色 */
}

.weapon-image-large img { /* 武器大图图片 模态框中的武器图片 */
  width: 100%; /* 武器大图图片 宽度：100% 占满容器宽度 */
  height: 100%; /* 武器大图图片 高度：100% 占满容器高度 */
  object-fit: cover; /* 武器大图图片 对象适应：覆盖 保持比例裁剪图片 */
}

.weapon-details { /* 武器详情 武器的详细信息容器 */
  display: flex; /* 武器详情 弹性布局 使用flex布局 */
  flex-direction: column; /* 武器详情 弹性方向：列 垂直排列详情项 */
  gap: 1.5rem; /* 武器详情 子元素间距：1.5rem 详情项之间的间距 */
}

.detail-section h3 { /* 详情区块标题 详情区块的标题样式 */
  color: #4ecdc4; /* 详情区块标题 字体颜色：#4ecdc4 青色突出标题 */
  margin-bottom: 0.5rem; /* 详情区块标题 下边距：0.5rem 与内容保持间距 */
  font-size: 1.1rem; /* 详情区块标题 字体大小：1.1rem 适中的标题字体 */
}

.stats-grid { /* 属性网格 武器属性的网格布局 */
  display: grid; /* 属性网格 网格布局 使用CSS Grid布局 */
  grid-template-columns: 1fr 1fr; /* 属性网格 网格列：1fr 1fr 两列等宽布局 */
  gap: 1rem; /* 属性网格 网格间距：1rem 属性项之间的间距 */
}

.stats-grid .stat-item { /* 属性网格项 网格中的属性项样式 */
  background: rgba(255, 255, 255, 0.05); /* 属性网格项 背景：白色5%透明度 轻微背景色 */
  padding: 0.75rem; /* 属性网格项 内边距：0.75rem 为属性项提供空间 */
  border-radius: 8px; /* 属性网格项 圆角：8px 轻微圆角设计 */
  display: flex; /* 属性网格项 弹性布局 使用flex布局 */
  flex-direction: column; /* 属性网格项 弹性方向：列 垂直排列标签和值 */
  align-items: center; /* 属性网格项 交叉轴对齐：居中 水平居中对齐 */
  text-align: center; /* 属性网格项 文本对齐：居中 文字居中显示 */
}

.stats-grid .stat-label { /* 属性网格标签 网格中的属性标签样式 */
  font-size: 0.9rem; /* 属性网格标签 字体大小：0.9rem 小号标签文字 */
  color: rgba(255, 255, 255, 0.7); /* 属性网格标签 字体颜色：白色70%透明度 半透明标签文字 */
  margin-bottom: 0.25rem; /* 属性网格标签 下边距：0.25rem 与属性值保持间距 */
}

.stats-grid .stat-value { /* 属性网格值 网格中的属性值样式 */
  font-size: 1.2rem; /* 属性网格值 字体大小：1.2rem 突出属性值 */
  font-weight: bold; /* 属性网格值 字体粗细：粗体 增强属性值重要性 */
  color: #4ecdc4; /* 属性网格值 字体颜色：#4ecdc4 青色突出数值 */
}

/* 武器描述和技能文本样式 */
.weapon-description,
.weapon-skill { /* 武器描述和技能文本样式 设置文本行高和颜色 */
  line-height: 1.6; /* 行高设置 设置为字体大小的1.6倍 提高文本可读性 */
  color: rgba(255, 255, 255, 0.9); /* 文本颜色 半透明白色 透明度90% 保持良好的视觉层次 */
}

/* 英雄信息卡片样式 */
.hero-info { /* 英雄信息卡片样式 弹性布局的信息展示卡片 */
  display: flex; /* 弹性布局 水平排列子元素 */
  align-items: center; /* 垂直居中对齐 所有子元素在交叉轴上居中 */
  gap: 15px; /* 子元素间距 设置15px的间距 */
  background: rgba(255, 255, 255, 0.05); /* 背景颜色 半透明白色背景 透明度5% */
  padding: 15px; /* 内边距 四周15px内边距 */
  border-radius: 8px; /* 圆角边框 8px圆角 */
  margin-top: 10px; /* 上外边距 顶部10px外边距 */
  cursor: pointer; /* 鼠标样式 指针样式表示可点击 */
  transition: all 0.3s ease; /* 过渡动画 所有属性0.3秒缓动过渡 */
}

/* 英雄信息卡片悬停效果 */
.hero-info:hover { /* 英雄信息卡片悬停效果 鼠标悬停时的交互反馈 */
  background: rgba(255, 255, 255, 0.1); /* 悬停背景色 半透明白色背景 透明度10% */
  transform: translateY(-2px); /* 垂直位移 向上移动2px 产生浮起效果 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* 阴影效果 垂直偏移4px 模糊12px 黑色阴影 透明度30% */
}

/* 英雄头像容器样式 */
.hero-avatar { /* 英雄头像容器样式 圆形头像显示区域 */
  width: 60px; /* 宽度设置 固定宽度60px */
  height: 60px; /* 高度设置 固定高度60px 与宽度相等形成正方形 */
  border-radius: 50%; /* 圆角设置 50%圆角形成圆形 */
  overflow: hidden; /* 溢出隐藏 隐藏超出容器的图片部分 */
  border: 2px solid #4ecdc4; /* 边框样式 2px实线边框 青绿色 */
  flex-shrink: 0; /* 弹性收缩 不允许收缩 保持固定尺寸 */
}

/* 英雄头像图片样式 */
.hero-avatar img { /* 英雄头像图片样式 头像图片的显示方式 */
  width: 100%; /* 图片宽度 占满父容器宽度 */
  height: 100%; /* 图片高度 占满父容器高度 */
  object-fit: cover; /* 图片适应方式 保持宽高比裁剪填充 */
}

/* 英雄详情信息区域样式 */
.hero-details { /* 英雄详情信息区域样式 弹性布局中的主要内容区域 */
  flex: 1; /* 弹性增长 占用剩余空间 */
}

/* 英雄名称样式 */
.hero-name { /* 英雄名称样式 英雄名称文本的显示样式 */
  font-size: 1.1rem; /* 字体大小 1.1倍根字体大小 */
  font-weight: bold; /* 字体粗细 粗体显示 */
  color: #4ecdc4; /* 字体颜色 青绿色主题色 */
}

/* 响应式设计 移动端适配样式 */
@media (max-width: 768px) { /* 媒体查询 屏幕宽度小于等于768px时应用以下样式 */
  .weapon-display { /* 武器展示页面容器 移动端样式调整 */
    padding: 1rem; /* 内边距调整 减少为1rem 适应小屏幕 */
  }
  
  .search-container { /* 搜索容器 移动端布局调整 */
    flex-direction: column; /* 弹性方向 改为垂直排列 */
  }
  
  .search-input-wrapper { /* 搜索输入框包装器 移动端宽度调整 */
    min-width: 100%; /* 最小宽度 占满容器宽度 */
  }
  
  .weapons-grid { /* 武器网格 移动端列数调整 */
    grid-template-columns: 1fr; /* 网格列模板 单列布局 */
  }
  
  .weapon-detail-content { /* 武器详情内容 移动端布局调整 */
    grid-template-columns: 1fr; /* 网格列模板 单列布局 */
  }
  
  .stats-grid { /* 属性网格 移动端列数调整 */
    grid-template-columns: 1fr; /* 网格列模板 单列布局 */
  }
}
</style>